<!--
 * @Date: 2020-07-11 14:14:02
 * @LastEditors: leehave
 * @LastEditTime: 2020-09-01 15:53:45
--> 
<template>
  <div class="waveWrapper waveAnimation" :style="{'background': background}">
    <div class="waveWrapperInner bgTop">
      <div class="wave waveTop"></div>
    </div>
    <div class="waveWrapperInner bgMiddle">
      <div class="wave waveMiddle"></div>
    </div>
    <div class="waveWrapperInner bgBottom">
      <div class="wave waveBottom"></div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    waveNum: {
      type: Number,
      value: 1
    },
    // 动画运行状态
    waveStatus: {
      type: Boolean,
      value: true
    },
    // 波浪颜色
    background: {
      type: String,
      value: "#7ec0eb"
    }
  },
  data() {
    return {};
  },
  computed: {},
  created() {},
  mounted() {},
  watch: {},
  methods: {},
  components: {}
};
</script>

<style lang="less">
.waveWrapper {
  height: 86px;
  width: 100%;
  overflow: hidden;
  position: relative;
}
.waveWrapperInner {
  position: absolute;
  width: 100%;
  overflow: hidden;
  height: 100%;
  bottom: 0;
}
.bgTop {
  z-index: 15;
  opacity: 0.5;
}
.bgMiddle {
  z-index: 10;
}
.bgBottom {
  z-index: 5;
}
@keyframes move_wave {
    0% {
        transform: translateX(0) translateZ(0) scaleY(1)
    }
    50% {
        transform: translateX(-25%) translateZ(0) scaleY(0.55)
    }
    100% {
        transform: translateX(-50%) translateZ(0) scaleY(1)
    }
}
.wave {
  position: absolute;
  left: 0;
  width: 200%;
  height: 100%;
  background-repeat: repeat no-repeat;
  background-position: 0 bottom;
  transform-origin: center bottom;
}

.waveTop {
  
  background-size: 100% 26px;
}

.waveAnimation .waveTop {
  animation: move-wave 3s;
   -webkit-animation: move-wave 3s;
   -webkit-animation-delay: 1s;
   animation-delay: 1s;
}

.waveMiddle {
  
  background-size: 100% 35px;
  animation: move_wave 10s linear infinite;
}

.waveAnimation .waveMiddle {
  animation: move_wave 15s linear infinite;
}

.waveBottom {
  
  background-size: 100% 36px;
}

.waveAnimation .waveBottom {
  animation: move_wave 12s linear infinite;
}

</style>
